<template>
	<view class="push">
		<block v-if="!boxHide">

			<view class="add_item">
				<view>库房</view>
				<picker mode="selector" :range="houseList" range-key="title" @change="getPickerValue" class="add_picker" :data-index="2">
					<text>{{houseList[houseIndex].title}}</text>
					<image src="/static/images/right.png" class="right"></image>
				</picker>
			</view>

			<view class="add_icon">
				<view>销售产品</view>
				<!-- <image src="/static/images/code.png" mode=""></image> -->
				<view @click.stop="openSearch('product')">
					<image src="/static/images/add.png" mode=""></image>
				</view>
			</view>
			<block v-for="(item,index) in upJson.product_list">
				<view class="add_item" :key="index">
					<view>产品名称</view>
					<view class="add_picker">
						<text>{{item.name}}</text>
						<image src="/static/images/visit_icon4.png" class="delete" @tap="delProduct(index)"></image>
					</view>
				</view>
				<view class="product_item">
					<view class="p_content">规格：{{item.specifications}}</view>
					<view class="p_content">型号：{{item.module}}</view>
				</view>
				<view class="product_item">
					<view class="p_content">单位：{{item.unit?item.unit:''}}</view>
				</view>
				<view class="add_item">
					<view>数量</view>
					<input type="text" v-model="upJson.product_list[index].number" placeholder="请输入数量" @blur="mathPrice(item)" />
				</view>
				<view class="add_item">
					<view>销售单价(元)</view>
					<input type="text" v-model="upJson.product_list[index].price" placeholder="请输入销售单价" @blur="mathPrice(item)" />
				</view>
				<view class="add_item">
					<view>总价(元)</view>
					<input type="text" v-model="upJson.product_list[index].total_price" placeholder="请输入总价" disabled />
				</view>
				<!-- <view class="add_item">
					<view>库房</view>
					<picker mode="selector" :range="upJson.product_list[index].houseList" @change="getPickerValue" :range-key="'showName'" class="add_picker"
					 :data-index="2" :data-indexs="index">
						<text>{{upJson.product_list[index].houseList[productIndex].showName}}</text>
						<image src="/static/images/right.png" class="right"></image>
					</picker>
				</view> -->
				<view class="add_textarea">
					<view>备注</view>
					<textarea v-model="upJson.product_list[index].desc" placeholder="请输入备注" />
				</view>
			</block>
			<view class="add_item">
				<view>订单总金额</view>
				<input type="text" v-model="upJson.total_price" placeholder="请输入订单总金额"/>
			</view>
			
			<view class="add_prompt">订单信息</view>
			<view class="add_item">
				<view>订单状态</view>
				<picker mode="selector" :range="typeList" @change="getPickerValue" class="add_picker" :data-index="3">
					<text>{{upJson.type}}</text>
					<image src="/static/images/right.png" class="right"></image>
				</picker>
			</view> 
			<view class="add_item">
				<view>订单类别</view>
				<picker mode="selector" :range="classList" @change="getPickerValue" class="add_picker" :data-index="4">
					<text>{{upJson.class}}</text>
					<image src="/static/images/right.png" class="right"></image>
				</picker>
			</view>
			<view class="add_item">
				<view>订单单号</view>
				<input type="text" v-model="upJson.order_no" placeholder="如不填写系统将自动生成"/>
			</view>
			
			<view class="add_prompt">客户信息</view>
			<view class="add_item">
				<view>客户姓名</view>
				<input type="text" v-model="customer_name" disabled placeholder="选择客户" @click.stop="openSearch('customer')"/>
				<image src="/static/images/right.png" class="right"></image>
				<!-- <picker mode="selector" :range="userList" @change="getPickerValue" class="add_picker" :data-index="5" :range-key="'title'">
					<text>{{customer_name}}</text>
					<image src="/static/images/right.png" class="right"></image>
				</picker> -->
			</view>
			<view class="add_item">
				<view>联系电话</view>
				<input type="text" v-model="upJson.mobile" placeholder="请输入联系电话"/>
			</view>
			<view class="add_item">
				<view>购买单位</view>
				<input type="text" v-model="upJson.buy_unit" placeholder="请输入购买单位"/>
			</view>
			<view class="add_item">
				<view>收货地址</view>
				<input type="text" v-model="upJson.address" placeholder="请输入收货地址"/>
			</view>
			
			<view class="add_prompt">操作人信息</view>
			<view class="add_item">
				<view>业务员</view>
				<input type="text" v-model="purchase_user_name" disabled @click.stop="openSearch('all_user')"/>
				<image src="/static/images/right.png" class="right"></image>
			</view>
			<view class="add_item">
				<view>开单日期</view>
				<Time :fields="'second'" :lang="false" :inputName="'create_at'" :time="upJson.create_at" @getDate="getDate"></Time>
			</view>
			<view class="add_item">
				<view>销售单位</view>
				<input type="text" v-model="upJson.sale_unit" placeholder="请输入销售单位"/>
			</view>
			<view class="add_item">
				<view>质保日期</view>
				<Time :fields="'second'" :lang="false" :inputName="'zb_date'" :time="upJson.zb_date" @getDate="getDate"></Time>
			</view>
			<view class="add_textarea">
				<view>订单备注</view>
				<textarea v-model="upJson.desc" placeholder="请输入备注" />
			</view>
			<view class="add_prompt">发货说明</view>
			<view class="add_item">
				<view>是否发货</view>
				<view class="add_sex">
					<text :class="upJson.is_ship == 0 ? 'active' : ''" @tap="setSex(0,'is_ship')">需发货</text>
					<text :class="upJson.is_ship == 1 ? 'active' : ''" @tap="setSex(1,'is_ship')">不发货</text>
				</view>
			</view>
			<block v-if="upJson.is_ship == 0">
				<view class="add_item">
					<view>交货日期</view>
					<Time :fields="'second'" :lang="false" :inputName="'jh_date'" :time="upJson.jh_date" @getDate="getDate"></Time>
				</view>
				<view class="add_textarea">
					<view>发货说明</view>
					<textarea v-model="upJson.fh_desc" placeholder="请输入发货说明" />
				</view>
			</block>
			
			<view class="add_prompt">开票信息</view>
			<view class="add_item">
				<view>收款方式</view>
				<picker mode="selector" :range="payList" @change="getPickerValue" class="add_picker" :data-index="8">
					<text>{{upJson.payment_method}}</text>
					<image src="/static/images/right.png" class="right"></image>
				</picker>
			</view>
			<view class="add_item">
				<view>收款期限</view>
				<Time :fields="'second'" :lang="false" :inputName="'sk_date'" :time="upJson.sk_date" @getDate="getDate"></Time>
			</view>
			<view class="add_item">
				<view>是否开票</view>
				<view class="add_sex">
					<text :class="upJson.is_payment == 0 ? 'active' : ''" @tap="setSex(0,'is_payment')">需开票</text>
					<text :class="upJson.is_payment == 1 ? 'active' : ''" @tap="setSex(1,'is_payment')">不开票</text>
				</view>
			</view>
			<block v-if="upJson.is_payment == 0">
				<view class="add_item">
					<view>发票类型</view>
					<picker mode="selector" :range="invoiceList" @change="getPickerValue" class="add_picker" :data-index="9">
						<text>{{upJson.invoice_type}}</text>
						<image src="/static/images/right.png" class="right"></image>
					</picker>
				</view>
				<view class="add_item">
					<view>发票抬头</view>
					<input type="text" v-model="upJson.invoice_up" placeholder="请输入发票抬头"/>
				</view>
				<view class="add_item">
					<view>发票编号</view>
					<input type="text" v-model="upJson.Invoice_number" placeholder="请输入发票编号"/>
				</view>
			</block>
			<view class="add_textarea">
				<view>财务说明</view>
				<textarea v-model="upJson.payment_desc" placeholder="请输入财务说明" />
			</view>
			
			<view class="add_prompt">安装流转</view>
			<view class="add_item">
				<view>预约安装</view>
				<view class="add_sex">
					<text :class="upJson.is_installation == 0 ? 'active' : ''" @tap="setSex(0,'is_installation')">需安装</text>
					<text :class="upJson.is_installation == 1 ? 'active' : ''" @tap="setSex(1,'is_installation')">不安装</text>
				</view>
			</view>
			<block v-if="upJson.is_installation == 0">
				<view class="add_item">
					<view>预约日期</view>
					<Time :fields="'second'" :lang="false" :inputName="'reservation_date'" :time="upJson.reservation_date" @getDate="getDate"></Time>
				</view>
				<view class="add_textarea">
					<view>安装说明</view>
					<textarea v-model="upJson.az_desc" placeholder="请输入安装说明" />
				</view>
			</block>
			
			<view class="add_prompt">其他信息</view>
			<view class="add_item">
				<view>产品条码</view>
				<input type="text" v-model="upJson.barcode" placeholder="请输入产品条码"/>
			</view>
			<view class="add_item">
				<view>回访机器实际数量</view>
				<input type="text" v-model="upJson.device_num" placeholder="请输入回访机器实际数量"/>
			</view>
			<view class="add_item">
				<view>客户评分</view>
				<picker mode="selector" :range="starList" @change="getPickerValue" class="add_picker" :data-index="10">
					<text>{{upJson.score}}</text>
					<image src="/static/images/right.png" class="right"></image>
				</picker>
			</view>
			<view class="add_item">
				<view>是否出库</view>
				<view class="add_sex">
					<text :class="isCk == 1 ? 'active' : ''" @tap="setSex(1,'isCk')">不出库</text>
					<text :class="isCk == 0 ? 'active' : ''" @tap="setSex(0,'isCk')">出库</text>
				</view>
			</view>
			<view class="add_item" v-if="isCk==0">
				<view>出库时间</view>
				<Time :fields="'second'" :lang="false" :inputName="'ck_date'" :time="upJson.ck_date" @getDate="getDate"></Time>
			</view>
			
			<view class="add_image">
				<view>上传照片</view>
				<view class="add_image_box">
					<block v-for="(item,index) in imgList">
						<view class="image_box" :key="index">
							<image src="/static/images/del_btn.png" class="del_btn" mode="aspectFill" @click.stop="delImg(index)"></image>
							<image :src="item" class="add_header" @tap="lookImg(index)" mode="aspectFill"></image>
						</view>
					</block>
					<view class="image_box add_inner_box">
						<image src="/static/images/img_add.png" mode="aspectFill" @tap="addImage()"></image>
					</view>
				</view>
			</view>
			<view class="save" @tap="submit()">完成</view>
		</block>
		<Loading ref='load'></Loading>
	</view>
</template>

<script>
	import Time from "../../../components/time/time.vue"
	import {
		deepClone
	} from '@/static/js/index.js'
	export default{
		components:{
			Time
		},
		data(){
			return{
				typeList:[],
				classList:[],
				// userList:[],
				supplierList:[],
				houseList:[], // 库房
				houseIndex:0, 
				payList:["微信收取","POS机收取","转账收取","现金收取"],
				invoiceList:["普票","服务增票","收据","专票","增票","电子发票"],
				starList:["10","9","8","7分及以下"],
				isCk:1, // 是否出库   0出库   1不出库
				upJson:{
					order_no:"",//订单号,不填写系统自动填写
					type:"",//订单状态
					class:"",//订单类别
					// close_at:"",//成交日期
					create_at:"",//开单日期
					sk_date:"",//收款期限
					total_price:"",//订单总价
					customer_id:"",//客户id
					mobile:"",//客户电话
					buy_unit:"",//客户单位
					address:"",//客户地址
					user_id:"",//业务员id
					desc:"",//订单备注
					is_ship:0, //是否发货 0 需发货 1不需
					jh_date:"",//交货期限
					fh_desc:"",//发货说明
					sale_unit:'',//销售单位
					zb_date:'',//质保日期
					is_payment:0,//是否开票 0需要 1不需要
					payment_method:'',//收款方式
					payment_desc:'',//财务说明
					invoice_type:'',//发票类型
					invoice_up:'',//发票抬头
					Invoice_number:'',//发票编号
					is_installation:0,//是否需要安装 0需要 1不需要
					reservation_date:"",//预约安装日期
					az_desc:'',//安装说明
					file_path:'',//附件地址
					barcode:"",//产品条码
					device_num:"",//回访机器数量
					score:"10",//评分1-10
					ck_date:"",//出库时间
					product_list:[],//[{"product_id":"产品id",'number':'产品数量','warehouse_id':'库房id',price:0,total_price}]
				},
				productIndex:0 ,// 产品下标
				supplier_name:"",
				customer_name:"",
				purchase_user_name:"",
				imgList:[],
			}
		},
		onLoad(options) {
			this.purchase_user_name = this.$store.getters.userInfo.username;
			this.upJson.user_id = this.$store.getters.userInfo.id;
			this.$refs.load.initLoading({loadType:1,loadPrompt:false}).then(res =>{
				this.boxHide = false
				this.$refs.load.getLoadingData({oldData:this.list,newData:res.data}).then(res => {
				});
			})
			this.$api.getOrderStatus({}).then(res =>{
				this.typeList = res;
				this.upJson.type = this.typeList[0];
			})
			this.$api.getOrderClass({}).then(res =>{
				this.classList = res;
				this.upJson.class = this.classList[0];  
			})
			this.$api.getOrderPayMethods({}).then(res =>{
				this.payList = res
				this.upJson.payment_method = this.payList[0];
			})
			this.$api.getOrderInvoiceType({}).then(res =>{
				this.invoiceList = res
				this.upJson.invoice_type = this.invoiceList[0];
			})
			this.getHouseData();
			// this.$api.getClientList({class:1}).then(res =>{
			// 	this.userList = res.data;
			// 	let index = 0
			// 	for(let i in res.data){
			// 		if(options.customerId == res.data[i].id){
			// 			index = i
			// 		}
			// 	}
			// 	this.customer_name = this.userList[index].title;
			// 	this.upJson.customer_id = this.userList[index].id;
			// 	this.upJson.mobile = this.userList[index].mobile
			// 	this.upJson.address = this.userList[index].address
			// })
			
			this.upJson.jh_date = this.$api.getNowTime();
			this.upJson.reservation_date = this.$api.getNowTime();
			//this.upJson.ck_date = this.$api.getNowTime();
			this.upJson.sk_date = this.$api.getNowTime();
			this.upJson.sale_unit=this.$store.getters['parameters/company'];
		}, 
		onShow() {
			this.setBaseNews();
		},
		methods:{
			//设置基础信息
			setBaseNews(){
				let obj=deepClone(this.$store.getters['parameters/searchObj']);
				if(obj.key=="product"){
					let listData=this.upJson.product_list.filter(item=>item.product_id==obj.data.id);
					console.log("返回的产品数据-----》》》",obj.data);
					if(listData.length>0){
						uni.showToast({
							title:"已经选择了该产品",
							icon:"none"
						})
						return false;
					}
					
					let a = {warehouse_id:this.houseList[this.houseIndex].id,warehouse_name:this.houseList[this.houseIndex].title,product_id:obj.data.id,name:obj.data.title,number:1,price:obj.data.price,total_price:obj.data.price,max:obj.data.stock,desc:""}
					a.specifications = obj.data.specifications;
					a.module = obj.data.module;
					a.unit = obj.data.unit;

					this.upJson.product_list.push(a);
					this.initTotalPrice();

					// this.$api.getProductWarehouse({product_id:obj.data.id}).then(res => {
					// 	res.forEach(item=>{
					// 		item.showName = item.title+" "+item.stock;
					// 	})
					// 	let a = {houseList:res,warehouse_id:res[0].warehouse_id,warehouse_name:res[0].title,product_id:obj.data.id,name:obj.data.title,number:1,price:obj.data.price,total_price:obj.data.price,max:obj.data.stock,desc:""}
					// 	this.upJson.product_list.push(a);
					// 	this.initTotalPrice();
					// })
				}else if(obj.key=="all_user"){
					this.purchase_user_name = obj.data.username;
					this.upJson.user_id = obj.data.id;
				}else if(obj.key=="customer"){
					this.customer_name = obj.data.title;
					this.upJson.buy_unit = obj.data.title;
					this.upJson.customer_id = obj.data.id;
					this.upJson.mobile = obj.data.mobile;
					this.upJson.address = obj.data.address;
				}
				this.$store.dispatch('parameters/deleteObj');
			},
			// 获取库房数据
			getHouseData(){ 

				this.$api.getProductLibrary({}).then(res => {
					this.houseList = res
				})

			},
			//打开搜索页面
			openSearch(key){

				if(key == 'product'){

					let hId = this.houseList[this.houseIndex].id;

					uni.navigateTo({ 
						url:'/pages/searchList/searchList?searchKey='+key+'&id='+hId
					})
				}else{
					uni.navigateTo({
						url:`/pages/searchList/searchList?searchKey=`+key
					})
				}

			},
			addImage(){
				uni.chooseImage({
					success:res => {
						this.imgList.push.apply(this.imgList,res.tempFilePaths)
					}
				})
			},
			lookImg(index){
				let that=this;
				uni.previewImage({
					urls: that.imgList,
					current:index,
				})
				
			},
			delImg(index){
				uni.showModal({
					title:"温馨提示",
					content:"是否删除该图片?",
					success:res =>{
						if (res.confirm) {
						    this.imgList.splice(index,1)
						}
					}
				})
			},
			setSex(index,obj){//选择按钮

				if(obj != 'isCk'){
					this.upJson[obj] = index;
				}else{
					this.isCk = index;
					// 出库设置默认时间
					this.upJson.ck_date = this.isCk==0?this.$api.getNowTime():'';
				}
			},
			delProduct(index){//删除产品
				let _this=this;
				uni.showModal({
					title:'温馨提示',
					content:"确认删除?",
					success(res) {
						if(res.cancel) return false;
						_this.upJson.product_list.splice(index,1);
						_this.initTotalPrice();
					}
				})
			},
			getDate(e){
				this.upJson[e.inputName] = e.date
			},
			getPickerValue(e){
				if(e.currentTarget.dataset.index == 2){//库房
					// this.upJson.product_list[Number(e.currentTarget.dataset.indexs)].warehouse_id = this.upJson.product_list[Number(e.currentTarget.dataset.indexs)].houseList[e.detail.value].warehouse_id;
					// this.upJson.product_list[Number(e.currentTarget.dataset.indexs)].warehouse_name = this.upJson.product_list[Number(e.currentTarget.dataset.indexs)].houseList[e.detail.value].title;
					// this.productIndex = e.currentTarget.dataset.indexs;
										
					this.houseIndex = e.detail.value;

					this.upJson.product_list = [];//清空
					this.upJson.total_price = '';//金额清0

				}else if(e.currentTarget.dataset.index == 3){//订单状态
					this.upJson.type = this.typeList[e.detail.value]
				}else if(e.currentTarget.dataset.index == 4){//订单类别
					this.upJson.class = this.classList[e.detail.value]
				}else if(e.currentTarget.dataset.index == 7){//销售产品
				}else if(e.currentTarget.dataset.index == 8){//收款方式
					this.upJson.payment_method = this.payList[e.detail.value]
				}else if(e.currentTarget.dataset.index == 9){//发票类型 
					this.upJson.invoice_type = this.invoiceList[e.detail.value]
				}else if(e.currentTarget.dataset.index == 10){//客户评分
					this.upJson.score = this.starList[e.detail.value]
				}
			},
			//初始化总价
			initTotalPrice(){
				let total_price = 0;
				this.upJson.product_list.forEach(item=>{
					item.total_price=item.number*item.price;
					total_price += item.total_price
				})
				this.upJson.total_price = total_price;
			},
			//计算价格
			mathPrice(itemObj){
				if(itemObj.number>itemObj.max){
					uni.showToast({
						title:'该产品数量超限,已调整为最大值',
						icon:"none"
					})
					itemObj.number=itemObj.max;
				}else if(itemObj.number==0){
					uni.showToast({
						title:'产品数量不能为0,已调整为最小值1',
						icon:"none"
					})
					itemObj.number=1;
				}
				this.initTotalPrice();
			},
			submit(){
				if(this.upJson.product_list.length < 1){
					uni.showToast({title:"销售产品不能为空",icon:"none"})
				}else if(Number(this.upJson.total_price) == 0){
					uni.showToast({title:"订单总价不能小于0",icon:"none"})
				}else if(this.upJson.customer_id.length<=0){
					uni.showToast({title:"请选择客户",icon:"none"})
				}else{
					let upJson = {};
					for(let key in this.upJson){
						upJson[key] = this.upJson[key]
					}
					upJson.file_path = ""
					upJson.product_list = JSON.stringify(upJson.product_list.map(item=>{
						return {
							"product_id":item.product_id,
							'number':item.number,
							'warehouse_id':item.warehouse_id,
							"price":item.price,
							"total_price":item.total_price,
							'desc':item.desc
						}
					}));
					this.$api.uploadFile(this.imgList).then(res =>{
						upJson.file_path=res.join('|');
						this.$api.addOrder(upJson).then(res =>{
							this.$app.globalData.upData.order = true
						})
					})
				}
			}
		}
	}
</script>

<style>
	.push{width: 100%;padding-bottom: 50upx;background: #FFFFFF;}
	.add_sex text{width: 120upx;}
	.product_item{
		margin: 0 30rpx;
		border-bottom: 2rpx solid #EEEEEE;
		height: 90rpx;
		line-height: 90rpx;
		display: flex;
		justify-content: space-between;
		font-size: 30rpx;
	}
	.product_item .p_content{

	}

	.add_textarea textarea{height: 170rpx;}

</style>
